<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Map with Driving Route from A to B</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>    
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <style type="text/css">
      .directions li span.arrow {
        display:inline-block;
        min-width:28px;
        min-height:28px;
        background-position:0px;
        background-image: url("https://heremaps.github.io/maps-api-for-javascript-examples/map-with-pedestrian-route-from-a-to-b/img/arrows.png");
        position:relative;
        top:8px;
      }
      .directions li span.depart  {
        background-position:-28px;
      }
      .directions li span.rightturn  {
        background-position:-224px;
      }
      .directions li span.leftturn{
        background-position:-252px;
      }
      .directions li span.arrive  {
        background-position:-1288px;
      }
      </style>
  </head>
  <body id="markers-on-the-map">

    <div class="page-header">
        <h1>Map with Pedestrian Route from A to B</h1>
        <p>Request a walking route from A to B and display it on the map.</p>
    </div>
    <p>This example calculates a walking route from <b>St Paul's Cathedral</b> in London <i>(51.5141°N, 0.0999°W)</i> to the <b>Tate Modern</b>
      <i>(51.5081°N, 0.0985°W)</i> on the south bank of the River Thames using pedestrian routing and displays it on the map. The 
      calculation finds the shortest available walking route, which in this case directs the user to use the pedestrian only Millennium Footbridge.</p>
    <div id="map"></div>
    <div id="panel"></div>
    <h3>Code</h3>
    <p>Access to the routing service is obtained from the <code>H.service.Platform</code> by calling 
      <code>getRoutingService()</code>. The <code>calculateRoute()</code> method is used to calculate the shortest  
      pedestrian (<code>mode:shortest;pedestrian</code>) route by passing in the relevant parameters as defined in 
      <a href="https://developer.here.com/documentation/routing-api/dev_guide/topics/use-cases/calculate-route.html" target="_blank">Routing API</a>. 
      The styling and display of the response is under the control of the developer.</p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>
